{% extends "common/base.html" %}
{% block title %}we are come to chat!{% endblock %}

{% block body %}
    <form method="post">
        <table width="100%">
            <tr>
                <td colspan="2" align="left">
                </td>
            </tr>
            <tr>
            <th width="160">Who are you :</th>
            <td align="left">
                <input type="text" id="nickname" name="nickname" value=""/>
                <span id="tips" style="color:red;">欢迎</span>
            </td>
            </tr>
            <tr>
            <th width="160">Enter a message:</th>
            <td align="left"><textarea name="text" id="text" cols="40" rows="4">{% if new_msg %}{{ new_msg.text }}{% endif %}</textarea></td>
            </tr>
            <tr>
                <td colspan="2">
                    <a href="JavaScript:;" onclick="submit();" >
                        提交
                    </a>
                    <span style="color:red">输入内容，按回车键可以提交数据</span>
                    <a href="{% url action="list/chats/1" %}" target="_blank">历史记录</a>
                </td>
            </tr>
        </table>
    </form>
    <ul id="chat_list">
        {% for chat in chats %}
        <li id="{{ chat.id }}" class="chat">
        {{ chat.id }}, <input type="text" class="nickname" value="{{ chat.nickname }}"/>, {{ chat.create_time|date:"Y-m-d H:i:s" }} :<br/> <textarea name="text" class="chat_text">{{ chat.text }}</textarea>
        {% empty %}
        <li>No chats!
        {% endfor %}
    </ul>
{% endblock %}
{% block meta_style %}
<style>
.chat_text { width:40%; min-width:16px; }
</style>
{% endblock %}
{% block meta_scripts %}
<link rel="stylesheet" href="/static/layer/skin/layer.css" media="all">
<script src="/static/layer/layer.js"></script>
<script type="text/javascript">
    var limit = {{ limit }};

    function listen_for_createchat(timestamp) {
        $.ajax({
            url        : "/chat/pull/chats/"+timestamp,
            type       : 'GET',
            dataType   : 'json',
            data       : '',
            beforeSend : function() {
            },
            success : function(data) {
                for (var i=0; i<data.chats.length; i++) {
                    var chat = data.chats[i];
                    var msg  = chat.id+", <input type=\"text\" class=\"nickname\" value=\""+chat.nickname+"\"/>, "+chat.create_time+" : ";
                    msg += "<br/><textarea class=\"chat_text\" name=\"text\">"+chat.text+"</textarea>";
                    $("#chat_list").prepend("<li id=\""+chat.id+"\" class=\"chat\">"+msg);

                    if ($("#chat_list li").size()>limit) {
                        $("#chat_list li").eq(-1).remove();
                    } else {
                        ++limit;
                    }
                }
                listen_for_createchat(data.timestamp);
            },
            error : function() {
                setTimeout(function() {listen_for_createchat(timestamp);}, 1000);
            }
        });
    }
    function listen_for_delchat(timestamp) {
        $.ajax({
            url        : "/chat/pull/delchat/"+timestamp,
            type       : 'GET',
            dataType   : 'json',
            data       : '',
            beforeSend : function() {
            },
            success : function(data) {
                for (var i=0; i<data.chats.length; i++) {
                    var chat = data.chats[i];
                    $("#"+chat.id).remove();
                    if (limit>0) {
                        --limit;
                    }
                }
                listen_for_delchat(data.timestamp);
            },
            error : function() {
                setTimeout(function() {listen_for_delchat(timestamp);}, 2000);
            }
        });
    }

    function submit() {
        $('#tips').html('sending ...');
        var nickname = $("#nickname").val();
        var text     = $("#text").val();

        if (!nickname || undefined==nickname) {
            $('#tips').html('nickname is empty');
            return false;
        }
        if (!text || undefined==text) {
            $('#tips').html('text is empty');
            return false;
        }
        $.ajax({
            url        : "{% url action ="create" %}",
            type       : 'POST',
            dataType   : 'json',
            data       : 'nickname='+nickname+'&text='+text,
            beforeSend : function() {
            },
            success : function(json) {
                if (json.code==0) {
                    $('#tips').html('ok');
                    $('#text').val('');
                } else if(json.msg) {
                    $('#tips').html(json.msg);
                } else {
                    $('#tips').html('error');
                }
            }
        });
    }

    $(document).ready(function() {
        listen_for_createchat({{ timestamp }});
        listen_for_delchat({{ timestamp }});

        $('#text').keydown(function(e) {
            if (e.keyCode==13) {
                submit();
            }
        });

        $('.chat').live('click', function() {
            var chat_id = $(this).attr('id');

            layer.confirm('Sure to delete it('+chat_id+')?', {icon: 3, title:'提示'}, function(index) {

                $.post(
                    "{% url action="delete" %}",
                    {'chat_id':chat_id},
                    function(json) {
                        if (0==json.code) {
                            $('#tips').html('ok');
                            $('#text').val('');
                        } else if(json.msg) {
                            $('#tips').html(json.msg);
                        } else {
                            $('#tips').html('error');
                        }
                    }
                );

                layer.close(index);
            });

        });
    });

</script>
{% endblock %}
